<template>
    <div id="line-area" ref="canvas" class="canvas-pie" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import { createPinia } from 'pinia'
import * as echarts from 'echarts/core';
import { GridComponent, GridComponentOption } from 'echarts/components';
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { useChartsStore } from '@/stores/charts';
const pinia = createPinia();
const chartStore = useChartsStore(pinia)
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

type EChartsOption = echarts.ComposeOption<
  GridComponentOption | LineSeriesOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    var chartDom = document.getElementById('line-area')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        grid: {
            top: 30,
            left: 0,
            right: '2%',
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.data.xAxisDataList,
            axisLabel: {
                show: true,
                color: '#c8c8c8',
                formatter: function (value, index) {
                    let month = value.indexOf('-') ? chartStore.monthToChi[parseInt(value.split('-')[1])] +'月' : value;
                    let year = value.indexOf('-') ? value.split('-')[0] : value;
                    
                    return [
                        '{a|'+month+'}',
                        index%4 === 1 ? '{a|'+year+'}' : ''
                    ].join('\n')
                },
                rich: {
                    a: {
                        color: '#c8c8c8',
                        lineHeight: 15,
                        align: 'left'
                    }
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                color: '#c8c8c8',
                formatter: function (value) { return value+'K' }
            }
        },
        series: [
            {   
                data: props.data.contrastDataList,
                type: 'line', 
                symbol: 'none', 
                lineStyle: { color: '#e5e5e5', type: 'dashed'}
            },
            { 
                
                data: props.data.seriesDataList, 
                type: 'line', 
                symbol: 'none',
                areaStyle: { color: '#e3edfe' },
                lineStyle: { color: '#7ca7fb'},
                markPoint: {
                data: [{ 
                    type: 'max', 
                    name: 'Max', 
                    symbol: 'circle',
                    symbolSize: 14,
                    itemStyle: {
                        color: '#fff',
                        borderColor: '#7ca7fb', // 边框颜色
                        borderWidth: 2      // 边框宽度
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: (params) => { return params.value + 'k'}
                    }
                }],
            }
            },
        ]
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>
